<template>
  <div class="finance-forecast">
    <div class="toolbar">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/forecast' }">智能预测</el-breadcrumb-item>
        <el-breadcrumb-item>财务预测</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="toolbar-actions">
        <el-button type="primary" @click="handleForecast">
          <el-icon><MagicStick /></el-icon>
          开始预测
        </el-button>
        <el-button @click="handleExport">
          <el-icon><Download /></el-icon>
          导出报告
        </el-button>
      </div>
    </div>

    <!-- 财务概览 -->
    <el-row :gutter="20" class="overview-cards">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="overview-item">
            <div class="overview-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
              <el-icon :size="30"><Money /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-value">¥{{ financeData.revenue }}</div>
              <div class="overview-label">预测营收</div>
              <div class="overview-trend up">
                <el-icon><Top /></el-icon> +15.8%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="overview-item">
            <div class="overview-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)">
              <el-icon :size="30"><Coin /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-value">¥{{ financeData.profit }}</div>
              <div class="overview-label">预测利润</div>
              <div class="overview-trend up">
                <el-icon><Top /></el-icon> +18.5%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="overview-item">
            <div class="overview-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)">
              <el-icon :size="30"><Wallet /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-value">¥{{ financeData.cashFlow }}</div>
              <div class="overview-label">预测现金流</div>
              <div class="overview-trend up">
                <el-icon><Top /></el-icon> +12.3%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="overview-item">
            <div class="overview-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)">
              <el-icon :size="30"><TrendCharts /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-value">{{ financeData.profitMargin }}%</div>
              <div class="overview-label">利润率</div>
              <div class="overview-trend up">
                <el-icon><Top /></el-icon> +2.1%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 财务指标预测 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span><el-icon><TrendCharts /></el-icon> 财务指标趋势预测</span>
            </div>
          </template>
          <div ref="financeTrendChartRef" style="height: 400px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <span><el-icon><PieChart /></el-icon> 收入结构预测</span>
          </template>
          <div ref="revenueStructureChartRef" style="height: 400px"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 现金流预测 -->
    <el-card shadow="hover" style="margin-top: 20px">
      <template #header>
        <span><el-icon><Wallet /></el-icon> 现金流预测</span>
      </template>
      <div ref="cashFlowChartRef" style="height: 350px"></div>
    </el-card>

    <!-- 财务风险预警 -->
    <el-card shadow="hover" style="margin-top: 20px">
      <template #header>
        <span><el-icon><Warning /></el-icon> 财务风险预警</span>
      </template>
      <el-table :data="riskData" stripe style="width: 100%">
        <el-table-column prop="riskType" label="风险类型" width="150" />
        <el-table-column prop="level" label="风险等级" width="120">
          <template #default="{ row }">
            <el-tag :type="getRiskLevelType(row.level)">{{ row.level }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="probability" label="发生概率" width="120">
          <template #default="{ row }">
            <el-progress :percentage="row.probability" :color="getRiskColor(row.probability)" />
          </template>
        </el-table-column>
        <el-table-column prop="impact" label="影响程度" width="200" />
        <el-table-column prop="suggestion" label="应对建议" min-width="250" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

const financeData = ref({
  revenue: '1,256.8万',
  profit: '345.6万',
  cashFlow: '456.3万',
  profitMargin: 27.5
})

const riskData = ref([
  { riskType: '应收账款风险', level: '中', probability: 35, impact: '可能影响现金流', suggestion: '加强应收账款管理' },
  { riskType: '汇率波动风险', level: '低', probability: 18, impact: '外汇业务受影响', suggestion: '适当使用汇率对冲工具' },
  { riskType: '融资成本风险', level: '中', probability: 42, impact: '财务成本增加', suggestion: '优化融资结构' },
  { riskType: '市场竞争风险', level: '高', probability: 65, impact: '毛利率下降', suggestion: '加强产品竞争力' }
])

const financeTrendChartRef = ref(null)
const revenueStructureChartRef = ref(null)
const cashFlowChartRef = ref(null)

const handleForecast = () => {
  ElMessage.success('正在执行财务预测分析...')
}

const handleExport = () => {
  ElMessage.success('报告导出成功')
}

const getRiskLevelType = (level) => {
  const typeMap = { '高': 'danger', '中': 'warning', '低': 'success' }
  return typeMap[level] || ''
}

const getRiskColor = (probability) => {
  if (probability >= 60) return '#f56c6c'
  if (probability >= 30) return '#e6a23c'
  return '#67c23a'
}

const initCharts = () => {
  if (financeTrendChartRef.value) {
    const chart = echarts.init(financeTrendChartRef.value)
    const option = {
      tooltip: { trigger: 'axis' },
      legend: { data: ['营收', '利润', '现金流'] },
      xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4(预测)'] },
      yAxis: { type: 'value', name: '金额(万元)' },
      series: [
        { name: '营收', type: 'line', data: [980, 1050, 1120, 1257], itemStyle: { color: '#409eff' } },
        { name: '利润', type: 'line', data: [245, 268, 298, 346], itemStyle: { color: '#67c23a' } },
        { name: '现金流', type: 'line', data: [356, 385, 412, 456], itemStyle: { color: '#e6a23c' } }
      ]
    }
    chart.setOption(option)
  }

  if (revenueStructureChartRef.value) {
    const chart = echarts.init(revenueStructureChartRef.value)
    const option = {
      tooltip: { trigger: 'item' },
      series: [
        {
          name: '收入来源',
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
            { value: 680, name: '产品销售' },
            { value: 320, name: '服务收入' },
            { value: 156, name: '投资收益' },
            { value: 101, name: '其他收入' }
          ]
        }
      ]
    }
    chart.setOption(option)
  }

  if (cashFlowChartRef.value) {
    const chart = echarts.init(cashFlowChartRef.value)
    const option = {
      tooltip: { trigger: 'axis' },
      legend: { data: ['经营活动现金流', '投资活动现金流', '筹资活动现金流'] },
      xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月(预测)'] },
      yAxis: { type: 'value' },
      series: [
        { name: '经营活动现金流', type: 'bar', data: [120, 132, 145, 158, 165, 178], itemStyle: { color: '#409eff' } },
        { name: '投资活动现金流', type: 'bar', data: [-45, -38, -42, -35, -40, -38], itemStyle: { color: '#e6a23c' } },
        { name: '筹资活动现金流', type: 'bar', data: [25, 18, 32, 28, 25, 30], itemStyle: { color: '#67c23a' } }
      ]
    }
    chart.setOption(option)
  }
}

onMounted(() => {
  nextTick(() => {
    initCharts()
  })
})
</script>

<style scoped lang="scss">
@use './forecast-common.scss';
</style>

